<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加ECU</title>
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
    <style>
        body { background-color: #f5f5f5; }
        .container { width: 86%; margin: 0 auto; }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 5px; }
        .form-group input, .form-group select, .form-group .layui-input-block { width: 100%; padding: 8px; box-sizing: border-box; }
        .layui-row {
            display: flex;
            align-items: center;
            margin-bottom: 4px;
            margin-top: 8px;
        }
         .grid-demo {
            display: flex; /* 确保子元素也使用 Flexbox */
            align-items: center; /* 垂直居中 */
          }
    </style>
</head>
<body>
    <div class="container">
        <form id="ecuForm" class="layui-form">


			 <div class="layui-row" layui-col-space4>
			  <div class="layui-col-xs3">
			   <div class="grid-demo grid-demo-bg1">
				<label class="layui-form-label">零部件名称</label>
			   </div>
			  </div>
			  <div class="layui-col-xs3">
			   <div class="grid-demo">
				 <input type="text" id="name" name="name" required lay-verify="required" class="layui-input">
			   </div>
			  </div>
			  <div class="layui-col-xs3">
			   <div class="grid-demo grid-demo-bg1">
				<label class="layui-form-label">缩写</label>
			   </div>
			  </div>
			  <div class="layui-col-xs3">
			   <div class="grid-demo">
				<input type="text" id="abbr" name="abbr" required lay-verify="required" class="layui-input">
			   </div>
			  </div>
			 </div>
            {#----------------------------------------------------------------------#}
             <div class="layui-row" layui-col-space4>
			  <div class="layui-col-xs3">
			   <div class="grid-demo grid-demo-bg1">
				    <label class="layui-form-label">硬件</label>
			   </div>
			  </div>
			  <div class="layui-col-xs3">
			   <div class="grid-demo">
				    <input type="checkbox" name="pcb" title="PCB" lay-skin="primary" value="√">
			   </div>
			  </div>
			  <div class="layui-col-xs3">
			   <div class="grid-demo grid-demo-bg1">
                    <input type="checkbox" name="Bootloader" title="Bootloader" lay-skin="primary" value="√">
			   </div>
			  </div>
			  <div class="layui-col-xs3">
			   <div class="grid-demo">
                    <input type="checkbox" name="chipset" title="芯片" lay-skin="primary" value="√">
			   </div>
			  </div>
			 </div>
            {#----------------------------------------------------------------------#}
                 <div class="layui-row" layui-col-space4>
			  <div class="layui-col-xs3">
			   <div class="grid-demo grid-demo-bg1">
				    <label class="layui-form-label">操作系统</label>
			   </div>
			  </div>
			  <div class="layui-col-xs9">
			   <div class="grid-demo">
                    <select id="OS" name="OS" required lay-verify="required" class="layui-input">
                        <option value="Linux">Linux</option>
                        <option value="Android">Android</option>
                        <option value="QNX">QNX</option>
                        <option value="RTOS">RTOS</option>
                        <option value="HarmonyOS">HarmonyOS</option>
                        <option value="Windows">Windows</option>
                    </select>
			   </div>
			  </div>
			 </div>


            <div class="layui-row" layui-col-space4>
			  <div class="layui-col-xs3">
			   <div class="grid-demo grid-demo-bg1">
				    <label class="layui-form-label">应用软件</label>
			   </div>
			  </div>
			  <div class="layui-col-xs3">
			   <div class="grid-demo">
				    <input type="checkbox" name="app" title="应用软件" lay-skin="primary" value="√">
			   </div>
			  </div>
			  <div class="layui-col-xs3">
			   <div class="grid-demo grid-demo-bg1">
                    <input type="checkbox" name="app_3rd" title="第三方应用" lay-skin="primary" value="√">
			   </div>
			  </div>
			  <div class="layui-col-xs3">
			   <div class="grid-demo">

			   </div>
			  </div>
			 </div>
            {#----------------------------------------------------------------------#}
            <div class="layui-row" layui-col-space4>
			  <div class="layui-col-xs3">
			   <div class="grid-demo grid-demo-bg1">
				    <label class="layui-form-label">数据</label>
			   </div>
			  </div>
			  <div class="layui-col-xs3">
			   <div class="grid-demo">
				    <input type="checkbox" name="data_1" title="重要数据" lay-skin="primary" value="√">
			   </div>
			  </div>
			  <div class="layui-col-xs3">
			   <div class="grid-demo grid-demo-bg1">
                    <input type="checkbox" name="data_2" title="个人数据" lay-skin="primary" value="√">
			   </div>
			  </div>
			  <div class="layui-col-xs3">
			   <div class="grid-demo">
                    <input type="checkbox" name="data_3" title="关键数据" lay-skin="primary" value="√">
			   </div>
			  </div>
			</div>
            <div class="layui-row" layui-col-space4>
              <div class="layui-col-xs3">
                <div class="grid-demo grid-demo-bg1">
                  <!-- 空 label 占位 -->
                </div>
              </div>
              <div class="layui-col-xs3">
                <div class="grid-demo">
                  <input type="checkbox" name="data_key" title="密鑰数据" lay-skin="primary" value="√">
                </div>
              </div>
              <div class="layui-col-xs3">
                <div class="grid-demo grid-demo-bg1">
                  <input type="checkbox" name="data_car_info" title="车辆识别码" lay-skin="primary" value="√">
                </div>
              </div>
              <div class="layui-col-xs3">
                <div class="grid-demo">
                  <!-- 空占位 -->
                </div>
              </div>
            </div>
            {#----------------------------------------------------------------------#}
            <div class="layui-row" layui-col-space4>
			  <div class="layui-col-xs3">
			   <div class="grid-demo grid-demo-bg1">
				    <label class="layui-form-label">物理接口</label>
			   </div>
			  </div>
			  <div class="layui-col-xs3">
			   <div class="grid-demo">
				    <input type="checkbox" name="interface_usb" title="USB接口" lay-skin="primary" value="√">
			   </div>
			  </div>
			  <div class="layui-col-xs3">
			   <div class="grid-demo grid-demo-bg1">
                    <input type="checkbox" name="interface_sd" title="SD卡接口" lay-skin="primary" value="√">
			   </div>
			  </div>
			  <div class="layui-col-xs3">
			   <div class="grid-demo">
                   <input type="checkbox" name="interface_debug" title="调试接口" lay-skin="primary" value="√">
			   </div>
			  </div>
			 </div>
            {#----------------------------------------------------------------------#}
            <div class="layui-row" layui-col-space4>
                <div class="layui-col-xs3">
                    <div class="grid-demo grid-demo-bg1">
                        <label class="layui-form-label">内部通信</label>
                    </div>
                </div>
                <div class="layui-col-xs3">
                    <div class="grid-demo">
                        <input type="checkbox" name="can_bus" title="CAN通信" lay-skin="primary" value="√">
                    </div>
                </div>
                <div class="layui-col-xs3">
                    <div class="grid-demo grid-demo-bg1">
                        <input type="checkbox" name="eth_bus" title="以太通信" lay-skin="primary" value="√">
                    </div>
                </div>
                <div class="layui-col-xs3">
                    <div class="grid-demo">
{#                        <input type="checkbox" name="eth_bus" title="LIN通信" lay-skin="primary" value="√">#}
                    </div>
                </div>
            </div>

            {#----------------------------------------------------------------------#}
            <div class="layui-row" layui-col-space4>
                <div class="layui-col-xs3">
                    <div class="grid-demo grid-demo-bg1">
                        <label class="layui-form-label">无线通信</label>
                    </div>
                </div>
                <div class="layui-col-xs3">
                    <div class="grid-demo">
                        <input type="checkbox" name="wireless_bt" title="蓝牙" lay-skin="primary" value="√">
                    </div>
                </div>
                <div class="layui-col-xs3">
                    <div class="grid-demo grid-demo-bg1">
                        <input type="checkbox" name="wireless_wifi" title="WIFI" lay-skin="primary" value="√">
                    </div>
                </div>
                <div class="layui-col-xs3">
                    <div class="grid-demo">
                        <input type="checkbox" name="wireless_rf" title="射频通信" lay-skin="primary" value="√">
                    </div>
                </div>
            </div>
            {#----------------------------------------------------------------------#}
            <div class="layui-row" layui-col-space4>
                <div class="layui-col-xs3">
                    <div class="grid-demo grid-demo-bg1">

                    </div>
                </div>
                <div class="layui-col-xs3">
                    <div class="grid-demo">
                        <input type="checkbox" name="wireless_mobile" title="蜂窝通信" lay-skin="primary" value="√">
                    </div>
                </div>
                <div class="layui-col-xs3">
                    <div class="grid-demo grid-demo-bg1">
                        <input type="checkbox" name="wireless_gnss" title="GNSS" lay-skin="primary" value="√">
                    </div>
                </div>
                <div class="layui-col-xs3">
                    <div class="grid-demo">
                        <input type="checkbox" name="wireless_v2x" title="V2X" lay-skin="primary" value="√">
                    </div>
                </div>
            </div>

            {#----------------------------------------------------------------------#}
            <div class="layui-row" layui-col-space4>
                <div class="layui-col-xs3">
                    <div class="grid-demo grid-demo-bg1">
                        <label class="layui-form-label">重要功能</label>
                    </div>
                </div>
                <div class="layui-col-xs3">
                    <div class="grid-demo">
                        <input type="checkbox" name="ota_upgrade" title="OTA升级" lay-skin="primary" value="√">
                    </div>
                </div>
                <div class="layui-col-xs3">
                    <div class="grid-demo grid-demo-bg1">
                        <input type="checkbox" name="usb_upgrade" title="USB升级" lay-skin="primary" value="√">
                    </div>
                </div>
                <div class="layui-col-xs3">
                    <div class="grid-demo">
                        <input type="checkbox" name="obd__upgrade" title="OBD升级" lay-skin="primary" value="√">
                    </div>
                </div>
            </div>
            {#----------------------------------------------------------------------#}
            <div class="layui-row" layui-col-space4>
                <div class="layui-col-xs3">
                    <div class="grid-demo grid-demo-bg1">

                    </div>
                </div>
                <div class="layui-col-xs3">
                    <div class="grid-demo">
                        <input type="checkbox" name="obd_debug" title="OBD诊断" lay-skin="primary" value="√">
                    </div>
                </div>
                <div class="layui-col-xs3">
                    <div class="grid-demo grid-demo-bg1">
                        <input type="checkbox" name="intrusion_detection_prevention_systems" title="IDPS" lay-skin="primary" value="√">
                    </div>
                </div>
                <div class="layui-col-xs3">
                    <div class="grid-demo">

                    </div>
                </div>
            </div>

{#            <div class="layui-form-item">#}
{#                <div class="layui-input-block">#}
{#                    <button class="layui-btn" lay-submit lay-filter="ecuForm">提交</button>#}
{#                </div>#}
{#            </div>#}
        </form>
    </div>

    <script src="/static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script>
        layui.use(['form', 'layer'], function () {
            var form = layui.form;
            var layer = layui.layer;

            // 表单提交事件
            form.on('submit(ecuForm)', function (data) {
                // 发送表单数据到后端
                $.ajax({
                    url: '/addEcu',
                    type: 'POST',
                    data: data.field,
                    success: function(response) {
                        if (response.code === 0) {
                            layer.msg('ECU添加成功');
                        } else {
                            layer.msg(response.msg);
                        }
                    }
                });

                return false; // 阻止表单默认提交行为
            });
        });
    </script>
</body>
</html>